<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main v-if="applyInfo">
      <myNameCard :bgColor="1" :bool="applyInfo.ApplyUsers.length==0" :faceUrl="applyInfo.HeadUrl">
            <span slot="name">{{applyInfo.Name}}</span>
            <span slot="info">{{applyInfo.Job}}</span>
            <span slot="area">{{applyInfo.Introduce}}</span>
      </myNameCard>
      <div class="personWrap_0313">
          <div class="titles_0313">已有 <span> {{applyInfo.ApplyCount}} </span>位用户推荐</div>
          <div class="faceWrap_0313">
            <div class="faces_0313" v-if="applyInfo.ApplyUsers">
              <span class="defaultFace_0313" v-for="item in applyInfo.ApplyUsers" :style="{background:'url(' + (item.HeadUrl?item.HeadUrl:require('../assets/img/expert/icon_my@1.5x.png')) + ') no-repeat center'}"></span>
            </div>
            <p class="userText_0313" v-if="applyInfo.ApplyCount<10">还差{{10-applyInfo.ApplyCount}}个推荐就可以成为行家啦</p>
          </div>
      </div>
      <div v-if="canAction" class="styleButton" @click="identifyExperts()">给他认证</div>
    </main>
  </section>
</template>
<script>
import myHeader from './base/myHeader';
import myNameCard from './base/myNameCard';
import { fetch } from '../assets/api';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/fetchAPI';
import { Toast } from "mint-ui";
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '行家推荐'
      },
      applyInfo:null,
      loginData:null,
      sid:this.$route.query.sid,//分享着openId
      loginData:null,
      canAction:false
    }
  },
  created(){
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      if(!this.sid){
        Toast('该页面为无效地址');
        return;
      }
      this.isActionExpert();
    });
  },
  methods: {
    events(i){
      if(i==2) {
        history.back();
      }
    },
    goHome(){
      setTimeout(()=>{
        this.$router.push({ path: "/"});
      },3000);
    },
    async isActionExpert(){
      this.getExpertInfo().catch(err=>{
       Toast(err.ErrorInfo);
      });
      if(this.sid == this.loginData[0].OpenId){
        this.goHome();
        return;
      }
      let resp = await fetch(API.isAtionExpert,{ToOpenId: this.loginData[1].OpenId,Sig: this.loginData[1].Sig,OpenId:this.sid});
      if(resp.Result.State == 0){
        this.canAction = true;
      }else{
        //已经认证过
        Toast('您已经认证过该行家');
        this.goHome();
      }
    },
    async getExpertInfo(){
          let sourceData = await fetch(API.getExpertInfo,{OpenId:this.sid});
          let resInfo = sourceData.Result;
          if(!resInfo.ApplyUsers){
            resInfo.ApplyUsers = [];
          }
          let applylen = resInfo.ApplyUsers.length;
          if(applylen<10){
            let arrs=[];
            for(let i=0;i<10-applylen;i++){
              arrs.push({HeadUrl:null});
            }
            resInfo.ApplyUsers = [...resInfo.ApplyUsers,...arrs];
          }
          this.applyInfo = resInfo;
    },
    //认证他人成为行家   
    async identifyExperts(){
      await fetch(API.identifyExperts,{ToOpenId: this.loginData[1].OpenId,Sig: this.loginData[1].Sig,OpenId:this.sid});
      Toast('推荐该行家成功');
      this.getExpertInfo();
      this.goHome();
      //location.reload();
    }
  },
  components: {
    myHeader,
    myNameCard
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    width: 100%;
    height: 100%;
    padding-top: 0.44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    .bgColor {
      background: #fafafa;
      margin-bottom: 0.08rem;
    }
    .styleButton {
      display: block;
      width: 3.35rem;
      height: 0.47rem;
      line-height: 0.47rem;
      text-align: center;
      border-radius: 0.05rem;
      background: #557aff;
      border: none;
      color: white;
      font-size: 0.18rem;
      margin: 1rem auto 0.1rem;
    }
    .personWrap_0313 {
      width: 3.75rem;
      padding: 0.15rem 0.15rem 0;
      box-sizing: border-box;
      background: white;
      margin-top: 0.16rem;
      .faceWrap_0313 {
        .userText_0313 {
          padding-bottom: 0.18rem;
          font-size: 0.14rem;
          color: #555555;
          //border-bottom: .01rem solid #E5E5E5;
          text-align: right;
        }
        .faces_0313 {
          padding-top: 0.18rem;
          overflow: hidden;
          .defaultFace_0313 {
            float: left;
            display: block;
            width: 0.53rem;
            height: 0.53rem;
            border-radius: 50%;
            margin-right: 0.2rem;
            background: url("../assets/img/expert/icon_my@1.5x.png") center
              center;
            background-size: cover !important;
            background-repeat: no-repeat;
            margin-bottom: 0.24rem;
            &:nth-of-type(5n) {
              margin-right: 0rem;
            }
          }
        }
      }

      .titles_0313 {
        height: 0.54rem;
        border-bottom: 0.01rem solid #e5e5e5;
        font-size: 0.16rem;
        padding-top: 0.2rem;
        box-sizing: border-box;
        span {
          padding: 0 0.03rem;
          color: #557aff;
        }
      }
    }
  }
}
</style>

